<template>
    <Modal v-model="show" fullscreen title="入库单修改" :closable="false" :mask-closable="false"
        @on-visible-change="showModal" :width="800">
        <el-form ref="storageBill" label-width="80px" :model="storageBill" :rules="rules">
            <el-form-item label="批次号" prop="billId">
                <el-input size="small" v-model="storageBill.billId" disabled placeholder="批次号" style="width: 240px" />
            </el-form-item>
            <el-form-item label="发往仓库" prop="warehouseId">
                <el-select size="small" v-model="storageBill.warehouseId" placeholder="发往仓库" style="width: 240px">
                    <el-option v-for="ware in warehouses" :key="ware.warehouseId" :label="ware.warehouseName"
                        :value="ware.warehouseId">
                    </el-option>
                </el-select>
                <el-button size="small" style="margin-left: 10px" type="success" :loading="loadingWarehouse"
                    @click="getWarehouse">获取仓库信息</el-button>
            </el-form-item>
            <el-form-item label="跟踪单号" prop="trackingNo">
                <el-input size="small" v-model="storageBill.trackingNo" placeholder="跟踪单号,快递单号" style="width: 240px" />
                <label>可后期填写</label>
            </el-form-item>
            <el-form-item label="箱唛抬头" prop="shippingNo">
                <el-input size="small" v-model="storageBill.shippingNo" placeholder="箱唛抬头" style="width: 240px" />
                <label>默认为:MY-09270111133,可自定义</label>
            </el-form-item>
            <el-form-item label="类型" prop="counter">
                <el-radio-group size="small" v-model="storageBill.counter">
                    <el-radio :label="0">散货</el-radio>
                    <el-radio :label="1">整柜</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="柜号" prop="counterNo">
                <el-input size="small" v-model="storageBill.counterNo" placeholder="柜号" style="width: 240px" />
            </el-form-item>
            <!--  <el-form-item>
                    <el-checkbox :true-label="1" :false-label="0" v-model="storageBill.confirmType">以到货为准,勾选此项将以收到的货品为准，不再另行通知</el-checkbox>
                </el-form-item> -->
        </el-form>
        <div style="margin-top: 20px;text-align: center;">
            <el-button v-if="storageBill.state == 2" type="primary" :loading="modalLoading" @click="ok">
                已到仓了，只能修改基本信息
            </el-button>
        </div>
        <!--- 货品选择-->
        <el-divider>货品修改</el-divider>
        <el-form ref="el-form-item" label-width="80px" :inline="true" :model="item">
            <el-form-item prop="productId">
                <el-select size="small" style="width: 280px" @change="changeProduct" clear="item={}" clearable
                    :loading="searchLoading" placeholder="可输入、sku码 进行搜索" filterable remote :remote-method="remoteMethod"
                    v-model="item.productId">
                    <el-option v-for="(product, ind) in products" :key="ind"
                        :label="product.variationName + ',' + product.skuCode" :value="product.id">
                        <span style="float: right;color: #8492a6; font-size: 13px">{{ product.variationName }}</span>
                        <span style="float: left;">skuCode:{{ product.skuCode }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="quantity" :rules="[{ required: true, message: '入库数量不能为空', trigger: 'blur' }]">
                <el-input type="number" size="small" v-model="item.quantity" placeholder="商品数量>0" />
            </el-form-item>
            <el-button type="primary" :disabled="storageBill.state == 2" size="small"
                @click="submitForm('el-form-item')">新增</el-button>
            <el-button size="small" type="primary" :disabled="storageBill.state == 2" @click="chaxiang">自动拆箱</el-button>
        </el-form>
        <!--列表项-->
        <el-form :inline="true" ref="itemForm" :model="storageBill">
            <el-table :data="storageBill.items" stripe style="width: 100%">
                <el-table-column prop="boxNo" label="箱号" width="120">
                    <template slot-scope="scope">
                        <el-form-item :rules="[{ required: true, message: '箱号不能为空' }]"
                            :prop="'items.' + scope.$index + '.boxNo'">
                            <el-input size="small" v-model="scope.row.boxNo"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="图片" width="120">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.thumb" />
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180">
                </el-table-column>
                <el-table-column prop="variationName" label="规格" width="180">
                </el-table-column>
                <el-table-column prop="skuCode" label="sku编码" width="180">
                </el-table-column>
                <el-table-column prop="quantity" label="数量" width="120">
                    <template slot-scope="scope">
                        <el-form-item :rules="[{ required: true, message: '数量不能为空' }]"
                            :prop="'items.' + scope.$index + '.quantity'">
                            <el-input v-model="scope.row.quantity"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="length" label="外箱长(cm)" width="120"> <template slot-scope="scope">
                        <el-form-item :rules="[{ required: true, message: '长不能为空' }]"
                            :prop="'items.' + scope.$index + '.length'">
                            <el-input size="small" v-model="scope.row.length"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="width" label="外箱宽(cm)" width="120">
                    <template slot-scope="scope">
                        <el-form-item :rules="[{ required: true, message: '宽不能为空' }]"
                            :prop="'items.' + scope.$index + '.width'">
                            <el-input size="small" v-model="scope.row.width"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="height" label="外箱高(cm)" width="120"> <template slot-scope="scope">
                        <el-form-item :rules="[{ required: true, message: '高不能为空' }]"
                            :prop="'items.' + scope.$index + '.height'">
                            <el-input size="small" v-model="scope.row.height"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="volume" label="体积(m³)" width="120"> <template slot-scope="scope">
                        <!--     <el-form-item :rules="[{required:true,message:'体积自动计算'}]" :prop="'items.' + scope.$index + '.volume'">
                                <el-input size="small" v-model="scope.row.volume"></el-input>
                            </el-form-item> -->
                        {{ (scope.row.width * scope.row.length * scope.row.height) / 1000000 | toFixed(4) }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="操作">
                    <template slot-scope="scope">
                        <el-form-item>
                            <el-button size="small" :disabled="storageBill.state == 2" type="warning"
                                @click.prevent="removeDomain(scope.row)">删除</el-button>
                            <!-- <el-button v-if="scope.row.id" size="small" type="success" @click.prevent="saveItem(scope.row)">保存修改</el-button>
                                    <el-button v-else size="small" type="danger" @click.prevent="saveItem(scope.row)">保存新增</el-button> -->
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div style="margin-top: 20px;text-align: center;" slot="footer">
            <el-button @click="cancel">返回列表</el-button>
            <el-button v-if="storageBill.state != 2" type="primary" :loading="modalLoading" @click="ok">
                确定修改
            </el-button>
            <el-button v-else type="primary" :loading="modalLoading" @click="ok">
                已到仓了，只能修改基本信息
            </el-button>
        </div>
        <CStorageBox @boxCallBack="boxCallBack" ref="refStorageBox"></CStorageBox>
    </Modal>
</template>
<script>
import api from "@/api/api"
import {getWmsList, searchProductList,doStorageBillUpdate, getStorageBillDetail} from "@/api/ProductApi"
import CStorageBox from "./CStorageBox.vue"
export default {
    components: { CStorageBox },
    data() {
        return {
            show: false,
            searchLoading: false,
            loadingWarehouse: false,
            modalLoading: false,
            others: {

            },
            products: [],

            item: {
                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null
            },
            storageBill: {
                warehouseId: 0,
                items: [],
                state: 2
            },
            warehouses: [],
            rules: {

            },
            storageBillId: null
        };
    },
    methods: {
        showDialog(id) {
            this.storageBillId = id;
            this.show = true;
        },
        showModal(val) {
            if (val) {
                this.getDetail();
                this.getWarehouse();
            } else {

            }
        },
        getBoxCount() {
            var dt = [];
            for (var i = 0; i < this.storageBill.items.length; i++) {

                let bx = parseInt(this.storageBill.items[i].boxNo);
                if (dt.indexOf(bx) < 0) {
                    dt.push(bx);
                }
            }
            return dt.length;
        },
        chaxiang() {
            var me = this;
            if (!me.item.productId) {
                me.errorMessage("请先选择商品");
                return false;
            }
            if (!me.item.quantity) {
                me.errorMessage("请输入商品数量");
                return false;
            }
            this.$refs['refStorageBox'].showDialog();

        },
        boxCallBack(count) {
            var it = Math.ceil(this.item.quantity / count);
            for (var i = 0; i < it; i++) {
                let it2 = {
                    productName: this.item.productName,
                    variationName: this.item.variationName,
                    skuCode: this.item.skuCode,
                    productId: this.item.productId,
                    quantity: count,
                    thumb: this.item.thumb,
                    boxNo: this.getBoxCount() + 1,
                    width: width,
                    height: height,
                    length: length
                };
                //判断是否重复的Id
                this.storageBill.items.push(it2);

            }
            this.item = {
                productName: null, //货号

                variationName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null,
                boxNo: null
            };
            this.$refs['refStorageBox'].hideDialog();

        },
        getDetail() {
            var me = this;
            me.showLoading();
            getStorageBillDetail({id:me.storageBillId}).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.storageBill = body.obj;
                }
                me.hideLoading();

            }, response => {
                me.errorMessage("获取异常，请稍后再试")
                me.hideLoading();
            });
        },
        changeProduct: function (pr) {
            //商品选择
            var me = this;
            me.products.forEach((dt, ind) => {

                if (pr == dt.id) {
                    me.item.skuCode = dt.skuCode;
                    me.item.productName = dt.productName;
                    me.item.thumb = dt.pics;
                    me.item.variationName = dt.variationName;
                }
            });
        },
        removeDomain: function (row) {
            var me = this;
            var index = this.storageBill.items.indexOf(row);
            if (index !== -1) {
                let dt = this.storageBill.items[index];
                if (dt.id) {
                    //服务器删除
                    me.showLoading();
                    me.$http.post("/storagebill/item/doDelete.do", { id: row.id }).then(response => {
                        me.hideLoading();
                        var body = response;
                        if (body.status == 0) {
                            me.storageBill.items.splice(index, 1);

                        } else {
                            me.errorMessage(body.info);
                        }

                    }, response => {
                        me.hideLoading();
                        me.errorMessage("服务器或网络异常");
                    });

                } else {
                    this.storageBill.items.splice(index, 1);
                }
            }
        },
        saveItem: function (row) {
            var me = this;
            me.showLoading();
            me.$http.post("/storagebill/item/doSave.do", { boxNo: row.boxNo, billId: me.storageBill.id, id: row.id, productId: row.productId, quantity: row.quantity }).then(response => {
                me.hideLoading();
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");
                    me.getDetail();
                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                me.hideLoading();
                me.errorMessage("服务器或网络异常");
            });
        },
        submitForm(formName) {
            var me = this;
            if (!me.item.productId) {
                me.errorMessage("请先选择商品");
                return false;
            }
            if (!me.item.quantity) {
                me.errorMessage("请输入商品数量");
                return false;
            }
            let it = {
                variationName: me.item.variationName,
                productName: me.item.productName,
                skuCode: me.item.skuCode,
                productId: me.item.productId,
                quantity: me.item.quantity,
                thumb: me.item.pics,
                boxNo: me.storageBill.items.length + 1
            };
            //判断是否重复的Id
            this.storageBill.items.push(it);
            this.item = {
                productName: null, //货号
                productId: null, //實際id
                skuCode: null, //sku码
                quantity: null
            };

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
            }
            var me = this;
            me.searchLoading = true;
            searchProductList({ type: 1, warehouseId: me.storageBill.warehouseId, name: query }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.products = body.obj;
                }
                me.searchLoading = false;

            }, response => {
                me.searchLoading = false;
            });

        },

        getWarehouse: function () {

            var me = this;
            me.loadingWarehouse = true;
            getWmsList({}).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;
                    if (body.obj.length > 0) {
                        // me.warehouse = body.obj[0];
                        // me.storageBill.warehouseId = body.obj[0].warehouseId;
                    }
                }
                me.loadingWarehouse = false;

            }, response => {
                me.loadingWarehouse = false;
            });
        },
        okSubmit() {
            var me = this;
            me.modalLoading = true;
            let data = JSON.stringify(me.storageBill);
            doStorageBillUpdate({ data: data, warehouseId: me.storageBill.warehouseId }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("修改成功！");

                    me.modalLoading = false;
                    me.show = false;
                    me.$emit("ok");

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        ok: function () {
            this.$refs['storageBill'].validate((valid) => {
                if (valid) {

                    this.$refs['itemForm'].validate((svalid) => {
                        if (svalid) {
                            this.okSubmit();
                        } else {
                            this.errorMessage('请认真填写清单项数据');
                        }
                    });

                } else {
                    this.errorMessage('请认真填写基本信息');
                }
            })



        },
        cancel: function () {
            // this.$router.push({ name: "StorageBillList" }) 
            this.show = false;
        }
    }
}
</script>